<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24点数学挑战</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>24点数学挑战</h1>
            <div class="theme-toggle">
                <i class="fas fa-moon"></i>
            </div>
        </header>

        <div class="game-container" id="game-container">
            <div class="game-info">
                <div class="timer">
                    <i class="fas fa-clock"></i>
                    <span id="timer-display">00:00</span>
                </div>
                <div class="score">
                    <i class="fas fa-trophy"></i>
                    <span id="score-display">0</span>
                </div>
            </div>

            <div class="game-board" id="game-board">
                <div class="welcome-screen" id="welcome-screen">
                    <h2>欢迎来到24点挑战赛</h2>
                    <p>使用四个数字和基本运算（加减乘除）得到24</p>
                    <div class="difficulty-selector">
                        <h3>选择难度:</h3>
                        <div class="difficulty-options">
                            <button class="difficulty-btn" data-difficulty="easy">简单</button>
                            <button class="difficulty-btn" data-difficulty="medium">中等</button>
                            <button class="difficulty-btn" data-difficulty="hard">困难</button>
                        </div>
                    </div>
                    <button id="start-btn" class="primary-btn">开始游戏</button>
                    <button id="rules-btn" class="secondary-btn">规则说明</button>
                </div>

                <div class="game-play" id="game-play" style="display: none;">
                    <div class="cards-container" id="cards-container">
                        <!-- 卡片将由JS动态生成 -->
                    </div>
                    <div class="operations">
                        <button class="op-btn" data-operation="+">+</button>
                        <button class="op-btn" data-operation="-">-</button>
                        <button class="op-btn" data-operation="×">×</button>
                        <button class="op-btn" data-operation="÷">÷</button>
                    </div>
                    <div class="calculation-area">
                        <div id="expression-display" class="expression-display">选择两个数字和一个运算符</div>
                        <button id="calculate-btn" class="primary-btn" disabled>计算</button>
                    </div>
                    <div class="game-controls">
                        <button id="hint-btn" class="control-btn">
                            <i class="fas fa-lightbulb"></i> 提示
                        </button>
                        <button id="undo-btn" class="control-btn" disabled>
                            <i class="fas fa-undo"></i> 撤销
                        </button>
                        <button id="new-game-btn" class="control-btn">
                            <i class="fas fa-sync-alt"></i> 新游戏
                        </button>
                    </div>
                </div>

                <div class="game-result" id="game-result" style="display: none;">
                    <div class="result-content success" id="success-result">
                        <i class="fas fa-check-circle result-icon"></i>
                        <h2>恭喜！</h2>
                        <p>你成功解出了24点</p>
                        <div class="result-details">
                            <div class="time-taken">
                                <i class="fas fa-clock"></i>
                                <span id="time-value">00:30</span>
                            </div>
                            <div class="moves-taken">
                                <i class="fas fa-chess-knight"></i>
                                <span id="moves-value">8步</span>
                            </div>
                        </div>
                        <button id="continue-btn" class="primary-btn">继续挑战</button>
                    </div>
                    <div class="result-content failure" id="failure-result">
                        <i class="fas fa-times-circle result-icon"></i>
                        <h2>很遗憾！</h2>
                        <p>这道题确实有解，再试一次？</p>
                        <div class="solution-container">
                            <button id="show-solution-btn" class="secondary-btn">查看解法</button>
                            <div id="solution-display" class="solution-display" style="display: none;">
                                <!-- 解法将由JS动态生成 -->
                            </div>
                        </div>
                        <button id="retry-btn" class="primary-btn">重新尝试</button>
                        <button id="next-challenge-btn" class="secondary-btn">下一题</button>
                    </div>
                </div>
            </div>

            <div class="tutorial-overlay" id="tutorial-overlay" style="display: none;">
                <div class="tutorial-content">
                    <button id="close-tutorial" class="close-btn"><i class="fas fa-times"></i></button>
                    <h2>如何玩24点</h2>
                    <div class="tutorial-steps">
                        <div class="tutorial-step">
                            <div class="step-number">1</div>
                            <p>系统会随机生成4个数字（1-13）</p>
                        </div>
                        <div class="tutorial-step">
                            <div class="step-number">2</div>
                            <p>使用四则运算（加减乘除）将这4个数字组合计算</p>
                        </div>
                        <div class="tutorial-step">
                            <div class="step-number">3</div>
                            <p>目标是得到结果 24，每个数字必须且只能使用一次</p>
                        </div>
                        <div class="tutorial-step">
                            <div class="step-number">4</div>
                            <p>选择两个数字卡片，再选择一个运算符，点击计算</p>
                        </div>
                        <div class="tutorial-step">
                            <div class="step-number">5</div>
                            <p>计算结果会变成新的卡片，继续与剩余卡片计算</p>
                        </div>
                    </div>
                    <div class="tutorial-example">
                        <h3>示例:</h3>
                        <p>数字: 3, 8, 8, 1</p>
                        <p>解法: (8 ÷ 1) × (8 - 3) = 8 × 5 = 40</p>
                    </div>
                    <button id="start-from-tutorial" class="primary-btn">开始游戏</button>
                </div>
            </div>
        </div>

        <div class="stats-section">
            <h2>游戏统计</h2>
            <div class="stats-cards">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="stat-info">
                        <h3>已解决</h3>
                        <p id="solved-count">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="stat-info">
                        <h3>最快解题</h3>
                        <p id="best-time">--:--</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div class="stat-info">
                        <h3>连续天数</h3>
                        <p id="streak-days">0</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="history-section">
            <h2>最近记录</h2>
            <div class="history-table-container">
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>数字组合</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="history-data">
                        <!-- 历史记录将由JS动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer-content">
            <p>&copy; 2023 24点数学挑战 | <a href="https://github.com/yourusername/24-points-game" target="_blank">GitHub</a></p>
        </div>
    </footer>

    <script src="js/app.js"></script>
</body>
</html> 